<template>
  <div class="box">
    <banner />
    <header class="header">
      <span class="iconfont icon-xiaomi"></span>
      <router-link to="/Sousuo">
        <div class="sousuoKuang">
          <span class="iconfont icon-fangdajing"></span>净水器
          <span class="iconfont icon-saoyisao"></span>
        </div>
      </router-link>
      <router-link to="/Goods/Information"><span class="iconfont icon-xiaoxi"></span></router-link>
    </header>

    <div class="fuwu">
      <p>
        <span class="iconfont icon-duihao"></span>
        官方商城
      </p>
      <p>
        <span class="iconfont icon-duihao"></span>
        售后无忧
      </p>
      <p>
        <span class="iconfont icon-duihao"></span>
        资质证照
      </p>
    </div>
    <nav>
      <ul>
        <li>
          <img src="./img/nav (1).jpg" alt="" />
          <i>小米上新</i>
        </li>
        <li>
          <img src="./img/nav (2).jpg" alt="" />
          <i>手机</i>
        </li>
        <li>
          <img src="./img/nav (3).jpg" alt="" />
          <i>Xiaomi12</i>
        </li>
        <li>
          <img src="./img/nav (4).jpg" alt="" />
          <i>电视</i>
        </li>
        <li>
          <router-link to="/DaHome"><img src="./img/nav (5).jpg" alt=""/></router-link>
          <i>大家电</i>
        </li>

        <li>
          <img src="./img/nav_ (2).jpg" alt="" />
          <i>这能穿戴</i>
        </li>
        <li>
          <img src="./img/nav_ (3).jpg" alt="" />
          <i>教育优惠</i>
        </li>
        <li>
          <img src="./img/nav_ (4).jpg" alt="" />
          <i>省心优惠</i>
        </li>
        <li>
          <img src="./img/nav_ (5).jpg" alt="" />
          <i>以旧换新</i>
        </li>
        <li>
          <img src="./img/nav (6).jpg" alt="" />
          <i>米金兑换</i>
        </li>
        <li>
          <img src="./img/nav (7).jpg" alt="" />
          <i>小米众筹</i>
        </li>
        <li>
          <img src="./img/nav (8).jpg" alt="" />
          <i>电脑</i>
        </li>
        <li>
          <img src="./img/nav (9).jpg" alt="" />
          <i>生活电器</i>
        </li>
        <li>
          <img src="./img/nav (10).jpg" alt="" />
          <i>智能家居</i>
        </li>
        <li>
          <img src="./img/nav_ (7).jpg" alt="" />
          <i>生活酷玩</i>
        </li>
        <li>
          <img src="./img/nav_ (8).jpg" alt="" />
          <i>小米直播</i>
        </li>
        <li>
          <img src="./img/nav_ (9).jpg" alt="" />
          <i>手机充值</i>
        </li>
        <li>
          <img src="./img/nav_ (10).jpg" alt="" />
          <i>官网服务</i>
        </li>
      </ul>
    </nav>
    <div class="newGoods">
      <img src="./img/001.jpg" alt="" />
    </div>
    <div class="xiaomikongtiao">
      <img src="./img/002.jpg" alt="" />
    </div>
    <h3>
      <router-link to="/NewYearIsShoppingFestival"
        ><span>热销甄选</span></router-link
      >
      <i>更多手机推荐 ></i>
    </h3>
    <div class="zhenxuan">
      <bannerxia />
      <ul>
        <li><img src="./img/0001.jpg" alt="" /></li>
        <li><img src="./img/0002.jpg" alt="" /></li>
        <li><img src="./img/0003.jpg" alt="" /></li>
      </ul>
    </div>
    <h3>
      <!-- <span>省心优惠</span> -->
      <router-link to="/MobilePhoneCenter"><span>省心优惠</span></router-link>
      <i>抽大额红包 ></i>
    </h3>
    <div class="you-hui">
      <p>
        <img src="./img/youhui (1).jpg" alt="" />
        <i>¥2699</i>
      </p>
      <p>
        <img src="./img/youhui (2).jpg" alt="" />
        <i>¥279</i>
      </p>
      <p>
        <img src="./img/youhui (3).jpg" alt="" />
        <i>¥379</i>
      </p>
      <p>
        <img src="./img/youhui (4).jpg" alt="" />
        <i>¥2399</i>
      </p>
    </div>
    <h3>
      <router-link to="/WorryPreferential"><span>人气上新</span></router-link>
      <i>抽XIAOMI 12 ></i>
    </h3>
    <div class="shang-xin">
      <p>
        <img src="./img/shangxin (1).jpg" alt="" />
        <i>Xiaomi Watch S1</i>
      </p>
      <p>
        <img src="./img/shangxin (2).jpg" alt="" />
        <i>降噪耳机3</i>
      </p>
      <p>
        <img src="./img/shangxin (3).jpg" alt="" />
        <i>拍拍4K投屏器</i>
      </p>
    </div>
    <div class="zhi-bo">
      <img src="./img/shangxin (4).jpg" alt="" />
    </div>
    <div class="huolai" @click="huolai">
      <span class="iconfont icon-arrow-to-up"></span>
    </div>
    <LookLook />
    <homebottom class="homebottom"/>
  </div>
</template>
<script>
import banner from "./zinpm/banner.vue";
import bannerxia from "./zinpm/bannerxia.vue";
import LookLook from "./zinpm/LookLook.vue";
import homebottom from "./zinpm/homebottom.vue";
import $ from "jquery";
export default {
  name: "Home",
  components: {
    banner,
    bannerxia,
    LookLook,
    homebottom
  },
  methods: {
    returns() {
      this.$router.back();
    },
    huolai() {
      $(document).scrollTop(0);
    },
  },
};

$(document).scroll(() => {
  let scroH = $(document).scrollTop(); //滚动高度var viewH= $(window).height();//可见高度
  // let viewH = $(window).height(); //可见高度
  // let contentH = $(document).height(); //内容高度
  if (scroH > 600) {
    $(".huolai").css({
      display: "block",
    });
  } else if (scroH < 550) {
    $(".huolai").css({
      display: "none",
    });
  }
  if (scroH > 100) {
    $(".sousuoKuang").css({
      width: 320,
    });
    $("header").css({
      backgroundColor: "#fff",
    });
    $("header .icon-xiaomi").css({
      display: "none",
    });
  } else if (scroH < 90) {
    $(".sousuoKuang").css({
      width: 270,
    });
    $("header").css({
      backgroundColor: "",
    });
    $("header .icon-xiaomi").css({
      display: "block",
    });
  }
});
</script>

<style scoped>
@import url(../gonggongwenjian/xiaomi-iconfont/iconfont.css);
.homebottom{
  position: fixed;
  bottom: 0;
  left: 0;
}
.tui-jian-shopp {
  height: 10rem;
  width: 100%;
  background-color: pink;
}
.huolai {
  height: 0.4rem;
  width: 0.4rem;
  border-radius: 50%;
  background-color: #ccc;
  position: fixed;
  right: 0.2rem;
  bottom: 0.7rem;
  line-height: 0.4rem;
  text-align: center;
  display: none;
}
.huolai .icon-arrow-to-up {
  font-weight: 700;
  font-size: 0.25rem;
  color: #6e6e6e;
}
header .icon-xiaomi,
header .icon-xiaoxi {
  color: #eee;
  font-size: 0.3rem;
}
.box {
  position: relative;
  /* height: 100%;
  width: 100%; */
}
header {
  height: 0.4rem;
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  transition: all 1s;
}
header .icon-xiaomi {
  transition: all 1s;
}
header div {
  transition: all 1s;
  height: 0.34rem;
  width: 2.7rem;
  display: flex;
  justify-content: space-between;
  box-sizing: border-box;
  padding: 0 0.12rem;
  background-color: #eee;
  border-radius: 0.17rem;
  align-items: center;
  color: #8e8e8c;
}
header div .iconfont {
  color: #8e8e8c;
  font-size: 0.2rem;
}
.fuwu {
  height: 0.3rem;
  width: 3rem;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.12rem;
  color: #777777;
}
.fuwu .iconfont {
  color: #777777;
}
/* =========================nav================== */
nav {
  height: 1.45rem;
  width: 3.3rem;
  margin: 0 auto;
  overflow-x: auto;
}
nav ul {
  width: 6.2rem;
  height: 100%;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
nav ul li {
  height: 0.65rem;
  width: 0.5rem;
  margin-right: 0.18rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}
nav ul li:nth-child(9),
nav ul li:nth-child(18) {
  margin-right: 0;
}
nav ul li img {
  height: 0.5rem;
  width: 0.5rem;
}
nav ul li i {
  font-size: 0.1rem;
}
/* =========================newGoods================== */
.newGoods {
  height: 1.5rem;
  width: 3.55rem;
  margin: 0 auto;
  margin-top: 0.1rem;
}
.newGoods img {
  height: 100%;
  width: 100%;
}
.xiaomikongtiao {
  height: 0.45rem;
  width: 3.55rem;
  margin: 0.1rem auto;
}
.xiaomikongtiao img {
  height: 100%;
  width: 100%;
}
h3 {
  height: 0.32rem;
  width: 3.45rem;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
h3 span {
  font-weight: 700;
}
h3 i {
  font-size: 0.12rem;
  color: #575757;
}
.zhenxuan {
  height: 2.5rem;
  width: 3.55rem;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
}
.zhenxuan ul {
  width: 1.75rem;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.zhenxuan ul li {
  height: 0.8rem;
  width: 100%;
}
.zhenxuan ul li img {
  height: 100%;
  width: 100%;
}
.you-hui {
  height: 1.1rem;
  width: 3.55rem;
  margin: 0 auto;
  display: flex;
  justify-content: space-around;
}
.you-hui p {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.you-hui p img {
  height: 0.8rem;
}
.you-hui p i {
  margin-top: 0.15rem;
  color: #e92900;
  font-weight: 700;
  box-sizing: border-box;
}
.shang-xin {
  height: 1.15rem;
  width: 3.55rem;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
}
.shang-xin p {
  height: 100%;
  text-align: center;
  font-size: 0.12rem;
}
.shang-xin p img {
  height: 0.8rem;
}
.shang-xin p i {
  margin-top: 0.06rem;
  display: inline-block;
}
.zhi-bo {
  height: 0.45rem;
  width: 3.55rem;
  margin: 0 auto;
}
.zhi-bo img {
  height: 100%;
  width: 100%;
}
</style>
